<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-17 10:48:24
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-26 10:59:37
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\fireFighting\riskMonitoring\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-details">
    <customDetailsTopbar title="消防重点部位详情" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <div class="py-1 px-1 bg-white">
        <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
        <div class="baseLoad">
          <div v-for="(it, ind) in descList" :key="ind">
            <custom-details-item :icon="it.icon" :label="it.label" :value="it.value">
              <template #valueSlot>
                <div v-if="it.label === '部位照片'" class="detail-image">
                  <!--                  <img v-if="it.value !== '&#45;&#45;'" style="width: 150px;margin: 10px 0;" :src="it.value">-->
                  <van-image v-if="it.value !== '&#45;&#45;'" :src="it.value" @click="ImagePreview([it.value])">
                    <template v-slot:error>暂无内容</template>
                  </van-image>
                  <span v-else>暂无</span>
                </div>
                <div v-else-if="it.label === '防火标识'" class="detail-image">
                  <van-image v-if="it.value !== '&#45;&#45;'" :src="it.value" @click="ImagePreview([it.value])">
                    <template v-slot:error>暂无内容</template>
                  </van-image>
                  <span v-else>暂无</span>
                </div>
                <span v-else style="word-break: break-all;">{{ it.value }}</span>
              </template>
            </custom-details-item>
          </div>
        </div>
        <div class="common_list" style="padding: 0;">
          <customTitle :is-line="true" bg-color="#3795ff" title="主要危险品或物质表" />
          <div v-for="item,ind in listData" :key="ind" class="list_item">
            <div class="content_area">
              <div class="number_order">{{ ind + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.pollutantName }}
                </div>
                <ul class="des-list">
                  <li v-for="des, ind1 in listDes" :key="ind1" class="des">
                    <i :class="'iconfont c-text-color' + ((ind1 % 7) + 1)" v-html="des.icon" />
                    <div class="label">{{ des.label }}：</div>
                    <div class="value">{{ item[des.value] }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <el-empty v-if="listData.length == 0" description="暂无数据" class="baseLoad1" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { importantPositionDetail } from '@/api/fireFighting'
import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      descList: [
        { label: '企业名称', fieldName: 'companyName', value: '/', icon: '&#xe790;' },
        { label: '部位名称', fieldName: 'positionName', value: '/', icon: '&#xe62c;' },
        { label: '所属构建物', fieldName: 'belongStructure', value: '/', icon: '&#xec54;' },
        { label: '部位类型', fieldName: 'positionType', value: '/', icon: '&#xe994;' },
        { label: '位置', fieldName: 'positionAddr', value: '/', icon: '&#xe87e;' },
        { label: '建筑耐火等级', fieldName: 'fireLevel', value: '/', icon: '&#xe6f7;' },
        { label: '管控措施', fieldName: 'controlMeasure', value: '/', icon: '&#xe7d4;' },
        { label: '防火标识', fieldName: 'fireMark', value: '/', icon: '&#xe7d4;' },
        { label: '部位照片', fieldName: 'positionPhoto', value: '/', icon: '&#xe603;' },
        { label: '负责人', fieldName: 'headUser', value: '/', icon: '&#xe700;' },
        { label: '负责部门', fieldName: 'headDepartment', value: '/', icon: '&#xe61c;' },
        { label: '负责人联系方式', fieldName: 'headPhone', value: '/', icon: '&#xe60a;' },
        { label: '备注', fieldName: 'positionMsg', value: '/', icon: '&#xe70f;' },
        { label: '判定标准', fieldName: 'positionStandard', value: '/', icon: '&#xe70f;' },
        { label: '更新时间', fieldName: 'updateTime', value: '/', icon: '&#xe685;' }
      ],
      listDes: [
        { label: '主要存放危险品或物质名称', value: 'pollutantName', icon: '&#xe62c;' },
        { label: '限定存放量', value: 'storeNum', icon: '&#xe633;' },
        { label: '责任管理人员', value: 'headUser', icon: '&#xe700;' },
        { label: '填报时间', value: 'updateTime', icon: '&#xe685;' }
      ],
      listData: [],
      positionId: '',
      descData: {}
    }
  },
  computed: {
    ImagePreview() {
      return ImagePreview
    }
  },
  inject: ['layout'],
  mounted() {
    const { current, positionId } = this.$route.query
    this.current = current || ''
    this.positionId = positionId || ''
    this.importantPositionDetail()
  },
  methods: {
    back() {
      this.$router.back()
    },
    async importantPositionDetail() {
      // this.layout.showLoading()
      this.layout.showAreaLoading(['.baseLoad'])
      this.layout.showAreaLoading(['.baseLoad1'])
      const { status, data } = await importantPositionDetail({
        positionId: this.positionId
      })
      if (status === 0 && data) {
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] !== '' ? data[v.fieldName] : '/'
        })
        this.descData = data
        this.listData = data.importantPositionRiskPollutants
      }
      // this.layout.hideLoading()
      this.layout.hideAreaLoading(['.baseLoad'])
      this.layout.hideAreaLoading(['.baseLoad1'])
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-image{
  color: red;
  width: 100%;
  min-height:100%;
  .van-image{
    width: 100%;
    min-height:100%;
    ::v-deep .van-image__error{
      line-height: 25px;
    }
    //height: 100%;
  }
}
</style>
